<template>
  <view class="chat-box">
    <view class="header">
<!--      <uni-icons class="btn-side left" type="back" size="24" @click="onNavBack()"></uni-icons>-->
      <image class="btn-side left" src="../../static/image/svg/back.svg" @click="onNavBack()" mode="aspectFit" style="width: 50rpx; height: 50rpx"></image>
      <image class="btn-side right" src="../../static/image/svg/post_moment.svg" @click="onPost()" mode="aspectFit" style="width: 50rpx; height: 50rpx"></image>
<!--      <uni-icons class="btn-side right" type="paperplane" size="25" @click="onPost()"></uni-icons>-->
    </view>
    <view class="friendsCircle-send">
      <form @submit="subform">
        <view class="friendsCircle-send-item">
          <textarea class="friendsCircle-send-textarea" auto-height placeholder="这一刻的想法..." maxlength="200"
                    v-model="form.content"></textarea>
        </view>
        <view class="friendsCircle-send-item">
          <zmm-upload-image chooseType="chooseMedia" @oneComplete="upLoadoneComplete" ref="upup"
                            v-model:fileList="form.files" :limit="limit"></zmm-upload-image>
        </view>
      </form>
    </view>
  </view>

</template>

<script>
import ZmmUploadImage from "@/components/zmm-upload-image/zmm-upload-image.vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons, ZmmUploadImage},
  data() {
    return {
      type: 'TEXT',
      limit: 9,
      location: '',
      form: {
        files: [],
        content: '',
      },
      rules: {
        content: {
          rules: [{
            required: true,
            errorMessage: '写点什么吧！',
          }]
        }
      }
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  },
  onLoad(e) {
  },
  methods: {
    onPost() {
      const formData = JSON.parse(JSON.stringify(this.form));
      this.$http({
        url: "/moment/create",
        method: 'POST',
        data: JSON.stringify({
          topicType: this.type,
          circleId: '1',
          content: JSON.stringify(formData),
          location: JSON.stringify(this.location)
        }),
      }).then((moment) => {
        this.momentStore.addMoment(moment);
        uni.showToast({
          title: `发布成功，1秒后自动跳转`,
          icon: 'none',
          duration: 1000
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/circle/index",
          });
        }, 1000)
      })
    },
    onNavBack() {
      // uni.switchTab({
      //   url: "/pages/circle/index"
      // })
      uni.navigateBack();
    },

    getlocation() {
      uni.chooseLocation({
        success: res => {
          this.location = res
        }
      });
    },
    upLoadoneComplete(e, type) {
      if (e.type == 'VIDEO') {
        this.limit = 1
        this.type = 'VIDEO'
        var vlist = []
        for (var i = 0; i < this.form.files.length; i++) {
          var item = this.form.files[i]
          if (item.type == 'VIDEO') {
            vlist.push(item)
          }
        }
        this.form.files = vlist
      } else {
        this.limit = 9
        this.type = 'IMAGE'
      }
    },
    subform(e) {
      var rules = {
        content: {
          rules: [{
            checkType: "required",
            errorMsg: "请填写文字内容"
          }]
        }
      };
      var formData = JSON.parse(JSON.stringify(this.form));
      var checkRes = this.$zmmFormCheck.check(formData, rules);
      if (checkRes) {
        this.$http.request({
          url: '/topic/sendTopic',
          method: 'POST',
          data: JSON.stringify({
            topicType: this.type,
            content: JSON.stringify(formData),
            location: JSON.stringify(this.location)
          }),
          success: (res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: '发表成功',
                icon: "none",
              }).then(() => {
                uni.redirectTo({
                  url: './person'
                })
              });
            }
          }
        });
      } else {
        uni.showToast({
          title: this.$zmmFormCheck.error,
          icon: "none",
          position: 'bottom'
        });
      }
    }
  },
  onNavigationBarButtonTap(e) {
    switch (e.index) {
      case 0:
        this.subform()
        break;
      default:
        break;
    }
  },
};
</script>

<style scoped lang="scss">
.chat-box {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    padding: 5px;
    background-color: #f8f8f8;
    line-height: 50px;
    font-size: 34rpx;
    font-weight: 600;
    border: #dddddd solid 1px;


    .btn-side {
      position: absolute;
      line-height: 60rpx;
      font-size: 28rpx;
      cursor: pointer;

      &.left {
        left: 30rpx;
      }

      &.right {
        right: 30rpx;
      }
    }
  }
}

.friendsCircle-send {
  padding: 24rpx 46rpx;
}

.friendsCircle-send-item {
  margin-bottom: 24rpx;
}

.friendsCircle-send-textarea {
  width: 100%;
  line-height: 48rpx;
  min-height: 240rpx;
}

.friendsCircle-send-itemx {
  padding: 0 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.friendsCircle-send-itemx-c {
  flex: 1;
  padding: 24rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px #eee solid;
}

.friendsCircle-send-itemx-c:nth-last-child(1) {
  border: none;
}

.friendsCircle-send-itemxlist {
  border-bottom: 1px #eee solid;
  border-top: 1px #eee solid;
}

.friendsCircle-send-itemx-icon {
  margin-right: 34rpx;
  color: #333;
  font-size: 42rpx;
}

.friendsCircle-send-itemx-text {
  font-size: 32rpx;
  color: #333;
  margin-right: auto;
}

.lcation .friendsCircle-send-itemx-icon, .lcation .friendsCircle-send-itemx-text {
  color: #05C160;
}
</style>
